<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
        <script type="text/javascript" th:inline="javascript">
            if ( [[${msg}]].indexOf("商品") && [[${msg}]] != "null") {
                alert([[${msg}]]);
            }
        </script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/bright.css}"/>
    <link rel="stylesheet" th:href="@{/css/addBook.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <title></title>
</head>
<script type="text/javascript">
    function allClick() {
        //取得全选复选框的选中未选 中状态
        let isCheck = $("#all").prop("checked");
        //将此状态赋值给每个商品列表里的复选框
        $("input[name=ck]").each(function () {
            this.checked = isCheck;
        });
    }

    function ckClick() {
        //取得所有name=ck的被选中的复选框
        var length = $("input[name=ck]:checked").length;
        //取得所有name=ck的复选框
        var len = $("input[name=ck]").length;
        //比较
        if (len === length) {
            $("#all").prop("checked", true);
        } else {
            $("#all").prop("checked", false);
        }
    }
</script>
<!--/*@thymesVar id="info" type="com.github.pagehelper.PageInfo<>"*/-->
<!--/*@thymesVar id="p" type="com.gnaixeuy.monkeyMi.entity.ProductInfo"*/-->
<!--/*@thymesVar id="getPrePage" type="java.lang.Integer"*/-->
<!--/*@thymesVar id="ptList" type="java.util.List"*/-->
<!--/*@thymesVar id="pt" type="com.gnaixeuy.monkeyMi.entity.ProductType"*/-->
<!--/*@thymesVar id="#httpSession.getAttribute('info')" type="com.github.pagehelper.PageInfo<>"*/-->

<body>
<div id="brall">
    <div id="nav">
        <p>商品管理>商品列表</p>
    </div>
    <div id="condition" style="text-align: center">
        <form id="myform">
            <label for="pname">商品名称：</label>
            <input name="pname" id="pname">&nbsp;&nbsp;&nbsp;
            <label for="typeid">商品类型：</label>
            <select name="typeid" id="typeid">
                <option value="-1">
                    请选择
                </option>
                <option th:each="pt : ${#servletContext.getAttribute('ptList')}" th:value="${pt.getTypeId()}" th:text="${pt.getTypeName()}">
                    type
                </option>
    </select>&nbsp;&nbsp;&nbsp;
    <label for="lprice">价格：</label>
    <input name="lprice" id="lprice">
    <label for="hprice">-</label>
    <input name="hprice" id="hprice">
    <input type="button" value="查询" onclick="ajaxsplit(${pb.pageNum})">

    </form>
</div>
<br>
<div id="table">
    <div id="top" th:if="${#httpSession.getAttribute('info').getList().size() != 0}">
        <input type="checkbox" id="all" onclick="allClick()" style="margin-left: 50px">
        <label for="all">&nbsp;&nbsp;全选</label>
        <a th:href="@{/to_addProduct.html}" href="addProduct.html">
            <input type="button" class="btn btn-warning" id="btn1" value="新增商品">
        </a>
        <input type="button" class="btn btn-warning" id="btn1" value="批量删除"
               onclick="deleteBatch([[${pb.pageNum}]])">
    </div>
    <!--显示分页后的商品-->
    <div id="middle">
        <table class="table table-bordered table-striped">
            <tr>
                <th></th>
                <th>商品名</th>
                <th>商品介绍</th>
                <th>定价（元）</th>
                <th>商品图片</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            <div th:each="p : ${#httpSession.getAttribute('info').getList()}">
                <tr>
                    <td valign="center" align="center">
                        <input type="checkbox" name="ck" id="ck" th:value="${p.getpId()}" onclick="ckClick()">
                    </td>
                    <td th:text="${p.getpName()}"></td>
                    <td th:text="${p.getpContent()}"></td>
                    <td th:text="${p.getpPrice()}"></td>
                    <td>
                        <img width="55px" height="45px" th:src="@{/image_big/{imgName}(imgName=${p.getpImage()})}"
                             alt="image"
                             src="#"/>
                    </td>
                    <td th:text="${p.getpNumber()}">
                        pNumber
                    </td>
                    <td>
                        <button type="button" class="btn btn-info " onclick="one([[${p.pId}]], [[${pb.pageNum}]])">
                            编辑
                        </button>
                        <button type="button" class="btn btn-warning" id="mydel"
                                onclick="del([[${p.pId}]], [[${pb.pageNum}]])">
                            删除
                        </button>
                    </td>
                </tr>
            </div>
        </table>
        <!--分页栏-->
        <div id="bottom">
            <div>
                <nav aria-label="..." style="text-align:center;">
                    <ul class="pagination">
                        <li>
                            <a href="#" th:onclick="'javascript:ajaxsplit('+${#httpSession.getAttribute('info').getPrePage()}+')'"
                               aria-label="Previous">
                                <span aria-hidden="true">«</span></a>
                        </li>
                        <li th:each="i : ${#numbers.sequence(1,#httpSession.getAttribute('info').getPages()) }">

                                <a href="#" th:onclick="'javascript:ajaxsplit('+${i}+')'"
                                   style="background-color: grey"
                                   th:if="${#httpSession.getAttribute('info').getPageNum()} == ${iStat.count}"
                                   th:text="${iStat.count}">cao
                                </a>
                            <a href="#" th:onclick="'javascript:ajaxsplit('+${i}+')'"
                               th:unless="${#httpSession.getAttribute('info').getPageNum()} == ${i}"
                               th:text="${iStat.count}">
                                cao
                            </a>
                        </li>

                        <li>
                            <a href="#"
                               th:onclick="'javascript:ajaxsplit('+${#httpSession.getAttribute('info').nextPage}+')'"
                               aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                        <li style=" margin-left:150px;color: #0e90d2;height: 35px; line-height: 35px;">总共&nbsp;&nbsp;&nbsp;
                            <font style="color:orange;"
                                  th:text="${#httpSession.getAttribute('info').getPages()}">nil</font>
                            &emsp;&nbsp;页&emsp;&emsp;当前&emsp;
                            <font style="color:orange;"
                                  th:if="${#httpSession.getAttribute('info').getPageNum() != 0}"
                                  th:text="${#httpSession.getAttribute('info').getPageNum()}">
                                1
                            </font>
                            &emsp;页
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <div th:unless="${#httpSession.getAttribute('info').getList().size()!=0}">
        <h2 style="width:1200px; text-align: center;color: orangered;margin-top: 100px">暂时没有符合条件的商品！</h2>
    </div>

</div>
</div>
<!--编辑的模式对话框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增商品</h4>
            </div>
            <div class="modal-body" id="addTD">
                <form th:action="@{/admin/product?flag=save}" action="#" enctype="multipart/form-data"
                      method="post" id="myform">
                    <table>
                        <tr>
                            <td class="one">商品名称</td>
                            <td>
                                <input type="text" name="pname" class="two form-control">
                            </td>
                        </tr>
                        <!--错误提示-->
                        <tr class="three">
                            <td class="four"></td>
                            <td><span id="pnameerr"></span></td>
                        </tr>
                        <tr>
                            <td class="one">商品介绍</td>
                            <td>
                                <input type="text" name="pcontent" class="two form-control">
                            </td>
                        </tr>
                        <!--错误提示-->
                        <tr class="three">
                            <td class="four"></td>
                            <td><span id="pcontenterr"></span></td>
                        </tr>
                        <tr>
                            <td class="one">
                                定价
                            </td>
                            <td>
                                <label>
                                    <input type="number" name="pprice" class="two form-control">
                                </label>
                            </td>
                        </tr>
                        <!--错误提示-->
                        <tr class="three">
                            <td class="four"></td>
                            <td><span id="priceerr"></span></td>
                        </tr>

                        <tr>
                            <td class="one">图片介绍</td>
                            <td><input type="file" name="pimage" class="form-control"></td>
                        </tr>
                        <tr class="three">
                            <td class="four"></td>
                            <td><span></span></td>
                        </tr>

                        <tr>
                            <td class="one">总数量</td>
                            <td>
                                <input type="number" name="pnumber" class="two form-control">
                            </td>
                        </tr>
                        <!--错误提示-->
                        <tr class="three">
                            <td class="four"></td>
                            <td><span id="numerr"></span></td>
                        </tr>


                        <tr>
                            <td class="one">类别</td>
                            <td>
                                <select name="typeid" class="form-control">
                                    <!--                                    <c:forEach items="${typeList}" var="type">-->
                                    <!--                                        <option value="${type.typeId}">${type.typeName}</option>-->
                                    <!--                                    </c:forEach>-->
                                </select>
                            </td>
                        </tr>
                        <!--错误提示-->
                        <tr class="three">
                            <td class="four"></td>
                            <td><span></span></td>
                        </tr>

                        <tr>
                            <td>
                                <input type="submit" class="btn btn-success" value="提交">
                            </td>
                            <td>
                                <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                            </td>
                        </tr>
                    </table>
                </form>

            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
</body>
<!--弹出新增模式对话框-->
<script type="text/javascript">
    $(function () {
        $(".btn-info").on("click", function () {
            //浏览不关，第二次打开时要清空
            $("#myModal").modal("hide");
        });
        //新增学生非空判断
        $(".btn-success").on("click", function () {
            $("#myModal").modal("hide");
        });
    });
</script>
<script type="text/javascript">
    function mysubmit() {
        $("#myform").submit();
    }

    //批量删除
    function deleteBatch(page) {
        if (confirm("确定删除吗")) {
            //取得所有被选中删除商品的pid
            var zhi = $("input[name=ck]:checked");
            var str = "";
            var id = "";
            if (zhi.length === 0) {
                alert("请选择将要删除的商品！");
            } else {
                // 有选中的商品，则取出每个选 中商品的ID，拼提交的ID的数据
                if (confirm("您确定删除" + zhi.length + "条商品吗？")) {
                    //拼接ID
                    $.each(zhi, function () {
                        id = $(this).val();
                        if (id != null)
                            str += id + ",";
                    });

                    //取出查询条件
                    var pname = $("#pname").val();
                    var typeid = $("#typeid").val();
                    var lprice = $("#lprice").val();
                    var hprice = $("#hprice").val();
                    $.ajax({
                        url: "${pageContext.request.contextPath}/prod/deleteBatch.action",
                        data: {
                            "pids": str,
                            "page": page,
                            "pname": pname,
                            "typeid": typeid,
                            "lprice": lprice,
                            "hprice": hprice
                        },
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            alert(data.msg);//弹删除是否成功
                            $("#table").load("http://localhost:8080/admin/product.jsp #table")
                        }
                    });
                }
            }


        }
    }

    //单个删除
    function del(pid, page) {
        if (confirm("确定删除吗")) {
            //取出查询条件
            var pname = $("#pname").val();
            var typeid = $("#typeid").val();
            var lprice = $("#lprice").val();
            var hprice = $("#hprice").val();
            $.ajax({
                url: "${pageContext.request.contextPath}/prod/delete.action",
                data: {"pid": pid, "page": page, "pname": pname, "typeid": typeid, "lprice": lprice, "hprice": hprice},
                type: "post",
                dataType: "json",
                success: function (data) {
                    alert(data.msg);//弹删除是否成功
                    $("#table").load("http://localhost:8080/admin/login.action iframe #table")
                }
            });
        }
    }

    function one(pid, ispage) {
        location.href = "${pageContext.request.contextPath}/prod/one.action?pid=" + pid + "&page=" + ispage;
    }
</script>
<!--分页的AJAX实现-->
<script type="text/javascript" th:inline="javascript">
    function ajaxsplit(page) {
        //取出查询条件
        var pname = $("#pname").val();
        var typeid = $("#typeid").val();
        var lprice = $("#lprice").val();
        var hprice = $("#hprice").val();
        $.ajax({
            type: "post",
            url: "/prod/ajaxSplit.action",
            data: {"page": page, "pname": pname, "typeid": typeid, "lprice": lprice, "hprice": hprice},
            success: function () {
                $("#table").load("http://localhost:8888/to_product.html #table");
            },
            error: function (e) {
                alert(e.message);
            }
        });
    }
</script>
</html>